<template>
  <div class="cont">
    <div class="jd-head">
      <router-link tag="div" to="/" class="back"><span class="iconfont">&#xe664;</span></router-link>
      <div class="titl">
        <a class="act">商品</a>
        <a>评价</a>
        <a>详情</a>
        <a>推荐</a>
      </div>
      <div class="more">
        <span class="iconfont">&#xe740;</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailHeader'
}
</script>

<style lang="stylus" scoped>
  .cont
    height 45px
    .jd-head
      font-size .3rem
      color #252525
      position fixed
      min-height 44px
      background #fff
      width 100%
      border-bottom 1px solid #e5e5e5
      z-index 10
      .back
        position absolute
        width 40px
        height 44px
        line-height 44px
        text-align center
      .back .iconfont
        font-size .36rem
        font-weight bold
        color #333
      .titl
        line-height 44px
        margin 0 70px
        display flex
        display -webkit-box
        display -webkit-flex
      .titl a
        flex 1
        -webkit-box-flex: 1
        -webkit-flex: 1
        text-align center
        color #252525
        font-size .28rem
      .titl a.act
        color #e4393c
      .more
        overflow hidden
        position absolute
        top 0
        right 0
        width 40px
        height 44px
        line-height 44px
        text-align center
      .more span
        font-size .56rem
        font-weight bold
        color #666
</style>
